<template>
  <div class="gold_medal_page">
    <div>
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="gold_medal_sec">
      <div>
        <div @click="openArea">区域<span class="iconfont icon-xiala"></span></div>
        <div @click="goBuildSearch">楼盘<span class="iconfont icon-xiala"></span></div>
      </div>
      <div v-show="modalShow" class="area_modal">
        <div v-show="modalShow">
          <div class="theme_color">区域</div>
          <div>
            <div :class="{theme_color:buildColor === allBuildColor }" @click="getAreaBuildAll">不限</div>
            <div :class="{theme_color:buildColor ===item.CODE }" @click="getAreaBuild(item.CODE)"
                 v-for="item in areaListData">{{item.region_name_c}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="gold_medal_content">
      <gold-modal-com v-if="goldMedalData.data" :goldMedalData="goldMedalData.data"></gold-modal-com>
    </div>
    <div v-show="goldMedalData.last_page !== 0">
      <div class="btnLoadMore" v-show="page !== goldMedalData.last_page" @click="loadMore">
        点击加载更多
      </div>
    </div>
  </div>
</template>

<script>
  import TitleGoBack from '../../components/common/TitleGoBack';
  import GoldModalCom from '../../components/GoldModalCom';
  import {areaApi, agentList} from '../../axios/api';
  import {getCityName} from '../../assets/js/cache';

  export default {
    name: 'GoldMedalPage',
    data() {
      return {
        title: '经纪人列表',
        modalShow: false,
        //  经纪人列表数据
        goldMedalData: [],
        areaListData: [],
        buildColor: 1,
        allBuildColor: 1,
        page:1,
      }
    },
    created() {
      this.getAreaList();
      this.getCityGoldMedalData();
      this.$store.commit('setCircleOfFriendsTitle','房产经纪人分享');
      this.$store.commit('setCircleOfFriendsDesc','房产经纪人分享');
    },
    methods: {
      //点击加载更多
      loadMore(){
        this.page += 1;
        agentList(this.page,this.buildColor,this.allBuildColor).then(res => {
          // console.log(res);
          this.goldMedalData.data = [...this.goldMedalData.data, ...res.data.data];
        }).catch(err => {
          console.log(err);
        })
      },
      //跳转到楼盘查找经纪人
      goBuildSearch(){
        this.$router.push({name:'BuildSearchAgent'});
      },
      //获取经纪人列表 根据城市
      getCityGoldMedalData() {

        agentList(this.page,this.buildColor,this.allBuildColor).then(res => {
          // console.log(res);
          this.goldMedalData = res.data;
          // this.goldMedalData = res.data;
          // let i = 0;
          // let jinjiren = [];
          // let jinjirenList = [];
          // console.log(data);
          //
          // for (; i < data.data.length; i++) {
          //   jinjiren.push(data.data[i].adviser_list);
          //
          // }
          //
          // for (let j = 0; j < jinjiren.length; j++) {
          //
          //   if (jinjiren[j].length) {
          //
          //     for (let k = 0; k < jinjiren[j].length; k++) {
          //       jinjirenList.push(jinjiren[j][k])
          //     }
          //   }
          // }
          // this.goldMedalData = jinjirenList;
          // console.log(jinjirenList)
        }).catch(err => {
          console.log(err);
        })
      },
      //获取该区域的所有经纪人
      getAreaBuild(CODE) {
        this.buildColor = CODE;
        this.allBuildColor = 0;
        this.getCityGoldMedalData();
        this.modalShow = false;
      },
      //不限区域
      getAreaBuildAll() {
        this.allBuildColor = 1;
        this.page = 1;
        this.getCityGoldMedalData();
        this.modalShow = false;
      },
      //获取区域列表
      getAreaList() {
        areaApi(getCityName().CODE).then(res => {
          console.log(res, '===');
          this.areaListData = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      //打开区域列表
      openArea() {
        this.modalShow = !this.modalShow;
      }
    },
    components: {GoldModalCom, TitleGoBack}
  }
</script>

<style scoped>
  .gold_medal_page .gold_medal_sec > div:nth-child(1) {
    display: flex;
    background-color: #f8f8f8;
    width: 100%;
  }

  .gold_medal_page .gold_medal_sec > div:nth-child(1) > div {
    width: 50%;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }

  .gold_medal_page .area_modal {
    background-color: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 100vh;
    position: absolute;

  }

  .gold_medal_page .area_modal > div {
    display: flex;
    /*position: absolute;*/
    width: 100%;
    background-color: #f8f8f8;
  }

  .gold_medal_page .area_modal > div > div {
    width: 50%;
    line-height: 30px;
    margin-left: 10px;
  }

</style>
